<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>svg dom绘制五角星</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    html, body{ margin:0; height:100%;width:100%;vertical-align: middle;text-align: center; }
        #mystar{
            width: 100%;
            height: 100%;
            vertical-align: middle;
            display: table;
            text-align: center;

        }
       
        .svgContainer{
        		vertical-align:middle ;
                display: inline-block;
        		width: 70vmin;
        }
        #mystar:after{
             content:'';height:100%;width:0;display:inline-block;vertical-align:middle;
        }

        .img {
        border-radius: 23.36;
        }

    </style>
    <script>
    var hrefs = ["https://www.baidu.com/","https://www.baidu.com/","https://www.baidu.com/","https://www.baidu.com/","https://www.baidu.com/"];
    //图片数组
    var imgNames = ["1.png","2.png","3.png","1.png","2.png"];
    var circles=[];
        function createStar(multiple){
            //var root=document.getElementById("mystar");

            var SVG="http://www.w3.org/2000/svg";
           var svg = document.getElementById("svgContainer");

            var polygon=document.createElementNS(SVG,"polygon");
              var width = svg.offsetWidth/2;
              svg.setAttribute("height",svg.offsetWidth*0.9972385812269355)
          var height = svg.offsetHeight/2;

            if(multiple==0){
                alert("不可以为0");
                return;
            }
            var minCircleRadius  = width/multiple;
            var length = (width-minCircleRadius)/Math.cos(Math.PI/180*18);
           var  radius = 2*length*Math.sin(Math.PI/180*36)/Math.sin(Math.PI/180*54);
            var x = svg.offsetWidth/2-radius*Math.cos(Math.PI/180*18);
           var y = svg.offsetHeight/2-radius*Math.sin(Math.PI/180*18);
          
            //console.log("x:  y:  "+x+"  "+y)
            for(var i=0;i<10;i+=2){
                var p=svg.createSVGPoint();
                p.x=Math.sin(Math.PI*(2/5*i-1/5))*length+width;
                p.y=Math.cos(Math.PI*(2/5*i-1/5))*length+height+minCircleRadius/2;
                circles.push(p);
                polygon.points.appendItem(p);
            }
            //指定颜色（边框与填充）
            var arr_attr = {"fill":"black","text-align":"center","display":"inline-block","vertical-align":"middle"};
            for(var item in arr_attr){
            		polygon.setAttribute(item,arr_attr[item]);
            }
             svg.appendChild(polygon);
            for (var item in circles) {
             var p =   circles[item];
            /* var circle =document.createElementNS(SVG,"circle");
                circle.setAttribute("cx",p.x);
                circle.setAttribute("cy",p.y);
                circle.setAttribute("r",length/6); */
                var img =document.createElementNS(SVG,"image");
                var x_ =  Math.sqrt(2);
                  arr_attr_img = {"width":2*minCircleRadius,"height":2*minCircleRadius,"x":p.x-minCircleRadius,"y":p.y-minCircleRadius,"class":"img"};
               
                 for(var itemi in arr_attr_img){
                    img.setAttributeNS(null,itemi,arr_attr_img[itemi]);
                }
                img.id = "image"+item
                img.href.baseVal = imgNames[item];
               svg.appendChild(img);
                img.onclick=function(){
                    window.location.href = hrefs[i%2];
                };
               /* circle.appendChild(img);


                circle.setAttribute("fill","url(#raduisImage"+(++item)+")");
                circle.onclick=function(){
                    window.location.href = hrefs[i%2];
                };
                svg.appendChild(circle);*/
            };
           
              trueHeightProportion = length*(1+Math.cos(Math.PI/180*18))+minCircleRadius+minCircleRadius*Math.cos(Math.PI/180*18)/svg.offsetWidth;
           //console.log(trueHeight/2/width)
        }
    </script>
</head>
<body onload="createStar(4)">
    <div id="mystar">
   
    		<svg  class="svgContainer" id="svgContainer">
    			
               <!--  <defs>
                    <pattern id="raduisImage1" patternUnits="userSpaceOnUse" width="100" height="100">
                        <image xlink:href="pd_tx.jpg" x="0" y="0"  width="100" height="100" />
                    </pattern>
                     <pattern id="raduisImage2" patternUnits="userSpaceOnUse" width="100" height="100">
                        <image xlink:href="pd_yk.jpg" x="0" y="0"  width="100" height="100" />
                    </pattern>
                     <pattern id="raduisImage3" patternUnits="userSpaceOnUse" width="100" height="100">
                        <image xlink:href="tx.jpg" x="0" y="0" width="100" height="100" />
                    </pattern>
                     <pattern id="raduisImage4" patternUnits="userSpaceOnUse" width="100" height="100">
                        <image xlink:href="tx.jpg" x="0" y="0"  width="100" height="100" />
                    </pattern>
                     <pattern id="raduisImage5" patternUnits="userSpaceOnUse" width="100" height="100">
                        <image xlink:href="tx.jpg" x="0" y="0"  width="100" height="100" />
                    </pattern>
                </defs> -->
    		</svg>
    </div>
</body>
</html>